<template>
  <view class="container">
    <view class="title">填写个人信息</view>
    <view class="form">
<!--      <view class="uni-title uni-common-pl">地区选择器</view> -->
      		<!-- <view class="uni-list">
      			<view class="uni-list-cell"> -->
      				<!-- <view class="uni-list-cell-left">
      					当前选择
      				</view> -->
      				<!-- <view class="uni-list-cell-db">
      					<picker @change="bindPickerChange" :value="index" :range="array">
      						<view class="uni-input">{{array[index]}}</view>
      					</picker>
      				</view>
      			</view>
      		</view> -->
      <view class="form-item">
        <text class="label">姓名</text>
        <input class="input" type="text" placeholder="请输入姓名" v-model="name" />
      </view>
      <view class="form-item">
        <text class="label">性别</text>
        <picker @change="bindPickerChange" :value="index" :range="array">
        	<view class="uni-input">{{array[index]}}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">年龄</text>
        <input class="input" type="number" placeholder="请输入年龄" v-model="age" />
      </view>
      <button class="button" type="primary" @tap="submit">确定</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      gender: "男",
      age: "",
      array: ['男', '女'],
      index: 0,
    };
  },
  methods: {
     bindPickerChange: function(e) {
                console.log('picker发送选择改变，携带值为', e.detail.value)
                this.index = e.detail.value
                if(e.detail.value==1){
                  this.gender = "女";
                }else{
                  this.gender = "男";
                }
            },
    submit() {
      // TODO: add your logic to handle the form submission
      console.log(this.name, this.gender, this.age);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}
.form {
  width: 100%;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.label {
  width: 100rpx;
  font-size: 28rpx;
  color: #333;
}
.input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 0 10rpx;
}
.radio-group {
  flex: 1;
  display: flex;
  justify-content: space-around;
}
.button {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  border-radius: 20rpx;
  margin-top: 40rpx;
}
</style>
